{% extends 'base.html' %}

{% block title %}教练工作台 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}教练工作台{% endblock %}

{% block extra_css %}
<style>
    .dashboard-stats {
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.primary { border-left-color: #007bff; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }
    .stat-card.warning { border-left-color: #ffc107; }
    .stat-card.danger { border-left-color: #dc3545; }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-icon.primary { color: #007bff; }
    .stat-icon.success { color: #28a745; }
    .stat-icon.info { color: #17a2b8; }
    .stat-icon.warning { color: #ffc107; }
    .stat-icon.danger { color: #dc3545; }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
        line-height: 1;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 0.5rem;
    }

    .dashboard-section {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: #2c3e50;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #28a745;
    }

    .income-card {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        border-radius: 15px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    .income-amount {
        font-size: 3rem;
        font-weight: 700;
        margin: 0;
    }

    .income-label {
        opacity: 0.9;
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }

    .schedule-item {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        border-left: 4px solid #28a745;
    }

    .schedule-item:hover {
        border-color: #28a745;
        box-shadow: 0 2px 10px rgba(40, 167, 69, 0.1);
    }

    .schedule-time {
        font-weight: 600;
        color: #28a745;
        font-size: 1.1rem;
    }

    .schedule-student {
        font-weight: 500;
        color: #2c3e50;
        margin: 0.5rem 0;
    }

    .schedule-location {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .student-card {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .student-card:hover {
        border-color: #28a745;
        box-shadow: 0 2px 10px rgba(40, 167, 69, 0.1);
    }

    .student-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .student-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #28a745, #20c997);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .student-info {
        flex: 1;
    }

    .student-name {
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .student-meta {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    .student-actions {
        margin-top: 0.5rem;
        display: flex;
        gap: 0.5rem;
    }

    .pending-request {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .pending-request .student-name {
        color: #856404;
    }

    .request-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
    }

    .quick-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1;
        min-width: 200px;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        text-decoration: none;
    }

    .btn-success-custom {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
    }

    .btn-info-custom {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
    }

    .btn-primary-custom {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 4rem;
        opacity: 0.3;
        margin-bottom: 1rem;
    }

    .status-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-confirmed { background: #d4edda; color: #155724; }
    .status-in-progress { background: #d1ecf1; color: #0c5460; }
    .status-completed { background: #f8d7da; color: #721c24; }

    @media (max-width: 768px) {
        .quick-actions {
            flex-direction: column;
        }

        .quick-action-btn {
            min-width: auto;
        }

        .student-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .student-avatar {
            margin-right: 0;
            margin-bottom: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% if error %}
        <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
        </div>
    {% else %}
        <!-- 统计卡片 -->
        <div class="dashboard-stats">
            <div class="row g-3">
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card success">
                        <div class="stat-icon success">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_students or 0 }}</h3>
                        <div class="stat-label">我的学员</div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="stat-card warning">
                        <div class="stat-icon warning">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.pending_requests or 0 }}</h3>
                        <div class="stat-label">待处理申请</div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="stat-card info">
                        <div class="stat-icon info">
                            <i class="bi bi-calendar-check"></i>
                        </div>
                        <h3 class="stat-number">{{ week_stats.total_lessons or 0 }}</h3>
                        <div class="stat-label">本周课程</div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="stat-card primary">
                        <div class="stat-icon primary">
                            <i class="bi bi-calendar-day"></i>
                        </div>
                        <h3 class="stat-number">{{ today_reservations|length or 0 }}</h3>
                        <div class="stat-label">今日课程</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 今日课程安排 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-calendar-day"></i>今日课程安排
                    </h4>

                    {% if today_reservations %}
                        {% for reservation in today_reservations %}
                        <div class="schedule-item">
                            <div class="schedule-time">
                                {{ reservation.start_time.strftime('%H:%M') if reservation.start_time else '' }} -
                                {{ reservation.end_time.strftime('%H:%M') if reservation.end_time else '' }}
                            </div>
                            <div class="schedule-student">
                                {{ reservation.student.real_name if reservation.student else '未知学员' }}
                            </div>
                            <div class="schedule-location">
                                <i class="bi bi-geo-alt me-1"></i>
                                {{ reservation.table.campus.name if reservation.table and reservation.table.campus else '未知校区' }} -
                                {{ reservation.table.name if reservation.table else '未知球台' }}
                            </div>
                            <div class="mt-2">
                                <span class="status-badge status-{{ reservation.status }}">
                                    {% if reservation.status == 'confirmed' %}已确认
                                    {% elif reservation.status == 'in_progress' %}进行中
                                    {% elif reservation.status == 'completed' %}已完成
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-calendar-x"></i>
                            <p>今天没有课程安排</p>
                            <small>您可以查看预约管理或联系学员安排课程</small>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 我的学员 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-people"></i>我的学员
                    </h4>

                    {% if my_students %}
                        {% for student_data in my_students %}
                        {% set student = student_data[0] %}
                        {% set relation = student_data[1] %}
                        <div class="student-card">
                            <div class="student-header">
                                <div class="student-avatar">
                                    {% if student.photo_url %}
                                        <img src="{{ student.photo_url }}" alt="{{ student.real_name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                    {% else %}
                                        {{ student.real_name[0] if student.real_name else 'S' }}
                                    {% endif %}
                                </div>
                                <div class="student-info">
                                    <h6 class="student-name">{{ student.real_name }}</h6>
                                    <p class="student-meta">
                                        建立关系：{{ relation.applied_at.strftime('%Y-%m-%d') if relation.applied_at else '' }}
                                    </p>
                                </div>
                            </div>
                            <div class="student-actions">
                                <a href="{{ url_for('coach_student.student_detail', student_id=student.id) }}" class="btn btn-sm btn-outline-success">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                                <a href="{{ url_for('coach_student.student_detail', student_id=student.id) }}" class="btn btn-sm btn-success">
                                    <i class="bi bi-calendar-plus me-1"></i>安排课程
                                </a>
                            </div>
                        </div>
                        {% endfor %}

                        {% if my_students|length >= 10 %}
                        <div class="text-center">
                            <a href="{{ url_for('coach_student.my_students') }}" class="btn btn-outline-success">
                                查看全部学员
                            </a>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-people"></i>
                            <p>暂无学员</p>
                            <small>等待学员申请或您可以主动联系学员</small>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 待处理的学员申请 -->
        {% if pending_requests %}
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-person-plus"></i>待处理的学员申请
                <span class="badge bg-warning ms-2">{{ pending_requests|length }}</span>
            </h4>

            {% for request_data in pending_requests %}
            {% set student = request_data[0] %}
            {% set relation = request_data[1] %}
            <div class="pending-request">
                <div class="student-header">
                    <div class="student-avatar">
                        {% if student.photo_url %}
                            <img src="{{ student.photo_url }}" alt="{{ student.real_name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                        {% else %}
                            {{ student.real_name[0] if student.real_name else 'S' }}
                        {% endif %}
                    </div>
                    <div class="student-info">
                        <h6 class="student-name">{{ student.real_name }}</h6>
                        <p class="student-meta">
                            申请时间：{{ relation.applied_at.strftime('%Y-%m-%d %H:%M') if relation.applied_at else '' }}
                        </p>
                        {% if student.phone %}
                        <p class="student-meta">
                            <i class="bi bi-telephone me-1"></i>{{ student.phone }}
                        </p>
                        {% endif %}
                    </div>
                </div>
                <div class="request-actions">
                    <button class="btn btn-success" onclick="approveStudent({{ relation.id }})">
                        <i class="bi bi-check-lg me-1"></i>接受申请
                    </button>
                    <button class="btn btn-outline-danger" onclick="rejectStudent({{ relation.id }})">
                        <i class="bi bi-x-lg me-1"></i>拒绝申请
                    </button>
                    <a href="{{ url_for('coach_student.student_detail', student_id=student.id) }}" class="btn btn-outline-primary">
                        <i class="bi bi-eye me-1"></i>查看资料
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- 快捷操作 -->
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-lightning"></i>快捷操作
            </h4>
            <div class="quick-actions">
                <a href="{{ url_for('coach_student.my_students') }}" class="quick-action-btn btn-success-custom">
                    <i class="bi bi-people me-2"></i>我的学员
                </a>
                <a href="{{ url_for('coach_reservations.schedule') }}" class="quick-action-btn btn-info-custom">
                    <i class="bi bi-calendar3 me-2"></i>课程表管理
                </a>
            </div>
        </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动刷新统计数据
    setInterval(function() {
        fetch('/api/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Stats updated:', data.stats);
            }
        })
        .catch(error => console.error('Error fetching stats:', error));
    }, 30000);
});

// 接受学员申请
function approveStudent(relationId) {
    if (confirm('确定要接受这个学员申请吗？')) {
        fetch(`/coach/student/approve/${relationId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('操作失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}

// 拒绝学员申请
function rejectStudent(relationId) {
    const reason = prompt('请输入拒绝原因（可选）：');
    if (reason !== null) {
        fetch(`/coach/student/reject/${relationId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content')
            },
            body: JSON.stringify({ reason: reason })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('操作失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}
</script>
{% endblock %}